import { useState } from 'react';
import { View, Image, Text } from '@tarojs/components';
import './style.scss';
import Taro from '@tarojs/taro';
/**
 * 老年卡
 */
const CardItem = ({ data }) => {
  const [hide, seHide] = useState(false);
  const [accountNum, setAccountNum] = useState(data.accountNumbner);
  const clickCard = () => {
    Taro.navigateTo({
      url: '/subPages/oldCard/authCard/index',
    });
  };
  return (
    <View className="card-item" onClick={clickCard}>
      <View className="card-top">
        <View className="top-left">
          <Image className="shop-img" mode="aspectFill" src={data.imgUrl} />
          <View className="card-info">
            <Text className="title">{data.name}</Text>
            <Text className="user-name">{data.userName}</Text>
          </View>
        </View>
        <Text className="card-type">{data.cardytpeStr}</Text>
      </View>
      <View className="card-number">
        <Text>{accountNum}</Text>
        <View
          onClick={() => {
            seHide(!hide);
            if (!hide) {
              setAccountNum(
                accountNum.replace(/\s/g, '').replace(/(\d{4})\d+(\d{4})$/, '$2 **** **** $2'),
              );
            } else {
              setAccountNum(data.accountNumbner);
            }
          }}
          className={`eye-icon ${hide ? 'close' : 'open'}`}
        />
      </View>
    </View>
  );
};
export default CardItem;
